<template>
  <div class="edit-div">
    <div class="page-title">合作管理 > 绑定课程</div>
    <div class="demo-input-suffix">
      <span class="form-input-label"><i class="el-icon-star-on"></i>课程名称：</span>
      <el-input v-model="course_name" disabled class="unedit-input"></el-input>
      <el-button @click="onShowCourse">选择课程</el-button>
    </div>
    <div class="demo-input-suffix">
      <span class="form-input-label"><i class="el-icon-star-on"></i>合作方：</span>
      <el-input v-model="gov_name" disabled class="unedit-input"></el-input>
      <el-button @click="onShowGov">选择合作方</el-button>
    </div>
    <div class="submit-bar">
      <el-button @click="onSubmit" type="primary">保存</el-button>
      <el-button @click="goBack">取消</el-button>
    </div>
    <choice-course :show="showCourse" @onSubmit="onChoiceCourse" @onClose="onClose" />
    <choice-gov :show="showGov" @onSubmit="onChoiceGov" @onClose="onClose" />
  </div>
</template>
<script>
import { govModel, courseModel } from "@/api/models";
import { Message } from "element-ui";
import goBack from '@/mixins/goBack.js'
import ChoiceCourse from '../modals/ChoiceCourse.vue';
import ChoiceGov from '../modals/ChoiceGov.vue';
export default {
  mixins: [goBack],
  components: {ChoiceCourse, ChoiceGov},
  data() {
    return {
      data: {
        gov_id: "",
        course_id: "",
      },
      course_name: '',
      gov_name: '',
      showCourse: false,
      showGov: false,
    };
  },
  mounted() {

    let gov_id = parseInt(this.$route.query.gov_id);
    if (gov_id > 0) {
      this.data.gov_id = gov_id
      govModel.item(gov_id, res => {
        this.gov_name = res.data.name;
      });
    }

    let course_id = parseInt(this.$route.query.course_id);
    if (course_id && course_id > 0) {
      this.data.course_id = course_id
      courseModel.item(course_id, res => {
        this.course_name = res.data.course_name;
      });
    }

    if (this.$route.params.id) {
      this.id = this.$route.params.id
      this.getItem()
    }

  },
  methods: {
    onShowGov() {
      this.showGov = true;
    },
    onShowCourse() {
      this.showCourse = true;
    },
    onChoiceCourse(course) {
      this.data.course_id = course.course_id;
      this.course_name  = course.course_name;
      this.onClose()
    },
    onChoiceGov(gov) {
      this.data.gov_id = gov.id
      this.gov_name = gov.name
      this.onClose()
    },
    onClose() {
      this.showCourse = false
      this.showGov = false
    },
    getItem() {
      govModel.item(this.id, res => {
        this.data = res.data;
      });
    },
    onSubmit() {
      let d = Object.assign({}, this.data);
      console.log('onsubmit d', d)
      if (
        !d.course_id ||
        !d.gov_id 
      ) {
        return Message.warning("请填完整信息");
      }

      if(d.id) {
        govModel.govCourseUpdate(d.id, d, res=> {
          Message.success(res.message);
          this.$router.go(-1)
        }, err => {
          Message.warning(err.message)
        })
      }else{
        govModel.govCourseCreate(d, res => {
          this.$router.go(-1)
          Message.success(res.message)
        })
      }
    }
  }
};
</script>
<style scoped>
.unedit-input .el-input__inner{
  color: #333 !important;
}
</style>